<template>
	<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
		<el-form-item v-for="(value, index) in columns" :key="index" :label="value.label" :prop="value.prop">
			<!-- <template> -->
			<el-input v-model="form[value.prop as keyof typeof form]" placeholder="Please input" />
			<!-- </template> -->
			<!-- {{ form[value.prop as keyof typeof form] }} -->
		</el-form-item>

		<el-form-item  label="出生日期" prop="birth_date" align="center">
			<el-date-picker
				v-model="form.birth_date"
				type="datetime"
				placeholder="选择出生日期"
				format="YYYY-MM-DD HH:mm:ss"
				 value-format="YYYY-MM-DD HH:mm:ss"
			/>
        </el-form-item>
		<el-form-item>
			<el-button type="primary" @click="saveEdit(formRef)">保 存</el-button>
		</el-form-item>
	</el-form>
</template>

<script lang="ts" setup>
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { ref } from "vue";

const props = defineProps({
	data: {
		type: Object,
		required: true,
	},
	edit: {
		type: Boolean,
		required: false,
	},
	update: {
		type: Function,
		required: true,
	},
});

const defaultData = {
	id: -1,
	name: '',
	birth_date: new Date(),
	chushi_id: -1,
	rank_id: -1,
	level_id: -1,
	role: '',
};

const columns = [
	{ label: "人员编号", prop: "id" },
	{ label: "人员姓名", prop: "name" },
	// { label: "出生日期", prop: "birth_date" },
	{ label: "处室", prop: "chushi_name" },
	{ label: "职级", prop: "rank_name" },
	{ label: "级别", prop: "level_name" },
	{ label: "角色", prop: "role" },
];

interface TableItem {
	[key: string]: string | number;
}

const form = ref({ ...(props.edit ? props.data : defaultData) });

const rules: FormRules = {
	name: [{ required: true, message: "议题名称", trigger: "blur" }],
};
const formRef = ref<FormInstance>();
const saveEdit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (!valid) return false;
		props.update(form.value);
		ElMessage.success("保存成功！");

	});
};

// const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
// 	form.value.thumb = URL.createObjectURL(uploadFile.raw!);
// };

// const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
// 	if (rawFile.type !== 'image/jpeg') {
// 		ElMessage.error('Avatar picture must be JPG format!');
// 		return false;
// 	} else if (rawFile.size / 1024 / 1024 > 2) {
// 		ElMessage.error('Avatar picture size can not exceed 2MB!');
// 		return false;
// 	}
// 	return true;
// };
</script>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
